<template>
  <div>


    <div class="common-layout">
      <el-container>
        <el-header>
          <div style="text-align: right">

            <el-menu
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
            >
              <el-menu-item index="0">LOVO供应商管理系统</el-menu-item>
              <div class="flex-grow"/>
              <el-avatar>
                <el-icon>
                  <UserFilled/>
                </el-icon>
              </el-avatar>
              <el-menu-item index="1" @click="$router.push('/store')">
                库存
              </el-menu-item>
              <el-sub-menu index="2">
                <template #title>订单<el-badge is-dot :hidden="!info.returnGoods" class="item"/></template>
                <el-menu-item index="2-1" @click="$router.push('/order')">供货订单</el-menu-item>
                <el-menu-item index="2-2" @click="$router.push('/return')">退货订单<el-badge is-dot :hidden="!info.returnGoods" class="item"/>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>消息
                  <el-badge is-dot :hidden="!(info.invite||info.biddConfirm)" class="item"/>
                </template>
                <el-menu-item index="3-1" @click="$router.push('/invite')">采购邀请
                  <el-badge is-dot :hidden="!info.invite" class="item"/>
                </el-menu-item>
                <el-menu-item index="33-2" @click="$router.push('/biddConfirm')">中标书
                  <el-badge is-dot :hidden="!info.biddConfirm" class="item"/>
                </el-menu-item>
                <el-menu-item index="33-2" @click="$router.push('/seeBidd')">投标书</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="4" @click="exitLogin">
                退出登录
              </el-menu-item>
            </el-menu>
          </div>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "",
      ws: {},
    }
  },
  methods: {
    exitLogin() {
      sessionStorage.removeItem("token");
      this.$router.push("/")
    },
    wsInit() {
      this.ws = new WebSocket("ws://175.178.223.162:8888/msg/" + sessionStorage.getItem("token"));
      let that = this
      this.ws.onopen = function (evt) {
        console.log("Connection open ..." + evt.data);
        that.ws.send("Hello WebSockets!");
        // this.ws.send(sessionStorage.getItem("token"))
      };

      this.ws.onmessage = function (evt) {
        that.info = JSON.parse(evt.data);
        console.log(evt.data)
      };

      this.ws.onclose = function (evt) {
        console.log("Connection closed." + evt.data);
      };
    },
    sendMsg() {
      this.ws.send(sessionStorage.getItem("token"))
    }
  }, created() {
    this.wsInit();
    // setInterval(this.sendMsg, 2000)
  }
}
</script>

<style scoped>
.el-header {
  height: 40px;
  line-height: 40px;
}

.flex-grow {
  flex-grow: 1;
}

.item {
  display: flex;
  margin-left: 8px;
  margin-top: -10px;
}


</style>